<!-- 影像索引表-面 -->
<template>
    <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
        <template #title>
            <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ typeName }}</span></h2>
            <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
            <el-button type="primary" @click="closeDrawer">关闭</el-button>
        </template>
        <template #default>
            <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="200px"
                v-loading="drawerLoading">
                <el-row justify="space-between">
                    <el-form-item label="省">
                        <el-input v-model="form.province" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="市">
                        <el-input v-model="form.city" clearable disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="区/县">
                        <el-input v-model="form.county" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="编号" prop="id">
                        <el-input v-model="form.id" placeholder="请输入编号" clearable maxlength="17"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="传感器" prop="sensor">
                        <el-input v-model="form.sensor" placeholder="请输入传感器" clearable maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="时相" prop="imageDate">
                        <el-input v-model="form.imageDate" placeholder="请输入时相" clearable maxlength="20"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="影像名称" prop="imageName" style="width:100%">
                        <el-input v-model="form.imageName" placeholder="请输入影像名称" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="200" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="城市名称" prop="city">
                        <el-input v-model="form.city" placeholder="请输入城市名称" clearable maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="数据格式" prop="format">
                        <el-input v-model="form.format" placeholder="请输入数据格式" clearable maxlength="30"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="投影信息" prop="projection" style="width:100%">
                        <el-input v-model="form.projection" placeholder="请输入投影信息" clearable maxlength="100"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="数据源" prop="dataSource" style="width:100%">
                        <el-input v-model="form.dataSource" placeholder="请输入数据源" clearable maxlength="100"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="波段信息" prop="bandInfo" style="width:100%">
                        <el-input v-model="form.bandInfo" placeholder="请输入波段信息" clearable maxlength="100"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="处理过程" prop="processInfo" style="width:100%">
                        <el-input v-model="form.processInfo" placeholder="请输入处理过程" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="备注" prop="commentInfo" style="width:100%">
                        <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
        </template>
    </el-drawer>
</template>
<script setup>
// 引入基础方法
import useSpatialData from '@/hooks/useSpatialData';
// 引入表单验证规则
import { eightDouble, fourInt } from '@/utils/validate';
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, isShowSave } = useSpatialData();
// 表单验证规则
const formRules = {
    id: [{ required: true, message: '请输入编号！', trigger: 'blur' }],
    imageDate: [{ required: true, message: '请输入时相！', trigger: 'blur' }],
    imageName: [{ required: true, message: '请输入影像名称！', trigger: 'blur' }],
    city: [{ required: true, message: '请输入城市名称！', trigger: 'blur' }],
    format: [{ required: true, message: '请输入数据格式！', trigger: 'blur' }],
    projection: [{ required: true, message: '请输入投影信息！', trigger: 'blur' }],
    dataSource: [{ required: true, message: '请输入数据源！', trigger: 'blur' }],
    bandInfo: [{ required: true, message: '请输入波段信息！', trigger: 'blur' }],
    processInfo: [{ required: true, message: '请输入处理过程！', trigger: 'blur' }],
}
</script>
<style lang="scss" scoped></style>